<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <!-- <div class="indexTitle">项目管理</div> -->
                    <div class="contentsize">楼幢详情</div>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="addtitle">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="房屋信息" name="first"></el-tab-pane>
                    <el-tab-pane label="产权资料" name="second"></el-tab-pane>
                    <el-tab-pane label="经营资料" name="third"></el-tab-pane>
                    <!-- <el-tab-pane label="委托运营资料" name="sixth"></el-tab-pane> -->
                    <!-- <el-tab-pane label="委托信息" name="forth"></el-tab-pane> -->
                    <el-tab-pane label="租赁信息" name="fifth"></el-tab-pane>
                    <el-tab-pane label="其他信息" name="seventh"></el-tab-pane>
                    <el-tab-pane label="房屋图片" name="eighth"></el-tab-pane>
                </el-tabs>
                <div>
                    <el-button type="primary" @click="backForm">返回</el-button>
                </div>
            </div>
            <div v-show="activeName == 'first'">
                <!-- <div class="detailcontent">
                    <div class="detailitem">区属名称：{{ projectdetail.qs }}</div>
                    <div class="detailitem">房屋地址：{{ projectdetail.fwdz }}</div>
                    <div class="detailitem">楼号：{{ projectdetail.lh }}</div>
                    <div class="detailitem">产别：{{ projectdetail.cb }}</div>
                    <div class="detailitem">权证类型：{{ projectdetail.qzlx }}</div>
                    <div class="detailitem">建筑面积：{{ projectdetail.jzmj }}</div>
                    <div class="detailitem">房屋性质：{{ projectdetail.fwyt }}</div>
                    <div class="detailitem">证书编号：{{ projectdetail.zsbh }}</div>
                    <div class="detailitem">计租面积：{{ projectdetail.jizumj }}</div>
                    <div class="detailitem">土地使用权面积：{{ projectdetail.tdsyqmj }}</div>
                    <div class="detailitem">产权单位：{{ projectdetail.cqdw }}</div>
                    <div class="detailitem">发证日期：{{ projectdetail.fzrq ? projectdetail.fzrq.split(' ')[0] : '' }}</div>
                    <div class="detailitem">土地使用权类型：{{ projectdetail.tdsyqlx }}</div>
                    <div class="detailitem">总楼层：{{ projectdetail.zlc }}</div>
                    <div class="detailitem">地上层数：{{ projectdetail.dscs }}</div>
                    <div class="detailitem">地下层数：{{ projectdetail.dxcs }}</div>
                    <div class="detailitem">风貌建筑：{{ projectdetail.fmjz }}</div>
                    <div class="detailitem">小洋楼招商：{{ projectdetail.zsxyl }}</div>
                    <div class="detailitem">建筑形式：{{ projectdetail.jzxs }}</div>
                    <div class="detailitem">原值：{{ projectdetail.yz }}</div>
                    <div class="detailitem">建档日期：{{ projectdetail.jdrq ? projectdetail.jdrq.split(' ')[0] : '' }}</div>
                    <div class="detailitem">建筑年代：{{ projectdetail.jznd }}</div>
                    <div class="detailitem">档案编号：{{ projectdetail.dabh }}</div>
                    <div class="detailitem">房屋结构：{{ projectdetail.fwjg }}</div>
                    <div class="detailitem1">备注：{{ projectdetail.note }}</div>
                </div>
                 -->
                <el-descriptions :column="3" border size="medium" :labelStyle="rowCenter" :contentStyle="contentCenter">
                    <el-descriptions-item label="区属名称：">{{ projectdetail.qs }}</el-descriptions-item>
                    <el-descriptions-item label="房屋地址：">{{ projectdetail.fwdz }}</el-descriptions-item>
                    <el-descriptions-item label="楼号：">{{ projectdetail.lh }}</el-descriptions-item>
                    <el-descriptions-item label="产别：">{{ projectdetail.cb }}</el-descriptions-item>
                    <el-descriptions-item label="权证类型：">{{ projectdetail.qzlx }}</el-descriptions-item>
                    <el-descriptions-item label="建筑面积：">{{ projectdetail.jzmj }}</el-descriptions-item>
                    <el-descriptions-item label="房屋性质：">{{ projectdetail.fwyt }}</el-descriptions-item>
                    <el-descriptions-item label="证书编号：">{{ projectdetail.zsbh }}</el-descriptions-item>
                    <el-descriptions-item label="计租面积：">{{ projectdetail.jizumj }}</el-descriptions-item>
                    <el-descriptions-item label="土地使用权面积：">{{ projectdetail.tdsyqmj }}</el-descriptions-item>
                    <el-descriptions-item label="产权单位：">{{ projectdetail.cqdw }}</el-descriptions-item>
                    <el-descriptions-item label="发证日期：">{{
                        projectdetail.fzrq ? projectdetail.fzrq.split(' ')[0] : ''
                    }}</el-descriptions-item>
                    <el-descriptions-item label="土地使用权类型：">{{ projectdetail.tdsyqlx }}</el-descriptions-item>
                    <el-descriptions-item label="总楼层：">{{ projectdetail.zlc }}</el-descriptions-item>
                    <el-descriptions-item label="地上层数：">{{ projectdetail.dscs }}</el-descriptions-item>
                    <el-descriptions-item label="地下层数：">{{ projectdetail.dxcs }}</el-descriptions-item>
                    <el-descriptions-item label="风貌建筑：" v-if="type=='2'">{{ projectdetail.fmjz }}</el-descriptions-item>
                    <el-descriptions-item label="风貌保护等级：" v-if="projectdetail.fmjz == '是'&&type=='2'">{{
                        projectdetail.fmjzjb
                    }}</el-descriptions-item>
                    <el-descriptions-item label="文物保护：" v-if="type=='2'">{{ projectdetail.wwbh }}</el-descriptions-item>
                    <el-descriptions-item label="文物保护级别：" v-if="projectdetail.wwbh == '是'&&type=='2'">{{
                        projectdetail.wwbhjb
                    }}</el-descriptions-item>
                    <el-descriptions-item label="小洋楼招商：" v-if="type=='2'">{{ projectdetail.zsxyl }}</el-descriptions-item>
                    <el-descriptions-item label="建筑形式：">{{ projectdetail.jzxs }}</el-descriptions-item>
                    <el-descriptions-item label="原值：">{{ projectdetail.yz }}</el-descriptions-item>
                    <el-descriptions-item label="建档日期：">{{
                        projectdetail.jdrq ? projectdetail.jdrq.split(' ')[0] : ''
                    }}</el-descriptions-item>
                    <el-descriptions-item label="建筑年代：">{{ projectdetail.jznd }}</el-descriptions-item>
                    <el-descriptions-item label="档案编号：">{{ projectdetail.dabh }}</el-descriptions-item>
                    <el-descriptions-item label="房屋结构：">{{ projectdetail.fwjg }}</el-descriptions-item>
                    <!-- <el-descriptions-item label="水表类型：">{{ projectdetail.sblx }}</el-descriptions-item> -->
                    <el-descriptions-item label="房产状态：">{{
                        projectdetail.fczt == '1' ? '未终止' : projectdetail.fczt == '2' ? '已终止' : ''
                    }}</el-descriptions-item>
                    <el-descriptions-item label="终止时间：" v-if="projectdetail.fczt == '2'">{{
                        projectdetail.zzsj ? projectdetail.zzsj.split(' ')[0] : ''
                    }}</el-descriptions-item>
                    <el-descriptions-item label="终止原因：" v-if="projectdetail.fczt == '2'">{{
                        projectdetail.zzyy
                    }}</el-descriptions-item>
                    <el-descriptions-item></el-descriptions-item>
                    <el-descriptions-item v-if="projectdetail.fczt == '2'"></el-descriptions-item>
                    <el-descriptions-item v-if="projectdetail.fczt == '2'"></el-descriptions-item>
                    <el-descriptions-item label="备注：">{{ projectdetail.note }}</el-descriptions-item>
                </el-descriptions>
                <!-- <div>附件</div>
                <div style="display:flex;margin-top: 20px;">
                    <div style=" text-align: center;margin-right:10px;cursor: pointer;width: 100px;"
                        v-for="(item, index) in projectdetail.fj" :key="index" class="filebox">
                        <img src="@/assets/img/file.png" alt="" style="width:50px;height:60px;"
                            @click="downloadfile(item.id, item.name, item.suffix)">
                        <div class="fileboxitem">{{ item.name }}</div>
                    </div>
                </div> -->
            </div>
            <div v-show="activeName == 'second'">
                <el-form ref="cqzlform" :model="cqzlform" label-width="80px" :inline="true" size="mini">
                    <el-form-item label="文件名称:">
                        <el-input v-model="cqzlform.wjmc" placeholder="请输入文件名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="文件类型:">
                        <el-cascader
                            :options="yjlxlist"
                            :show-all-levels="false"
                            placeholder="请选择文件类型"
                            clearable
                            @change="handleChange"
                            :props="{ checkStrictly: true }"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item label="备注:">
                        <el-select v-model="cqzlform.bz" placeholder="请选择备注" clearable filterable>
                            <el-option v-for="(item, index) in cqzlbzlist" :key="index" :label="item" :value="item"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="cqzlSearch">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="cqtable" style="width: 100%" border>
                    <el-table-column label="文件类型" align="center" prop="wjlx"></el-table-column>
                    <el-table-column label="文件名称" align="center" prop="wjmc" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="wjmc" label="文件预览" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <router-link
                                target="_blank"
                                :to="{ path: '/perviewfile', query: { id: scope.row.fj[0].id, type: scope.row.fj[0].suffix } }"
                                style="color: #008a94"
                                v-if="
                                    scope.row.fj[0].suffix == '.docx' ||
                                    scope.row.fj[0].suffix == '.doc' ||
                                    scope.row.fj[0].suffix == '.xls' ||
                                    scope.row.fj[0].suffix == '.xlsx'
                                "
                                >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i>
                            </router-link>
                            <el-button
                                type="text"
                                size="small"
                                @click="redownload(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                v-else
                                >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i
                            ></el-button>
                            <!-- <el-button type="text" size="small" @click="redownload1" v-else>{{
                    scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i></el-button> -->
                        </template>
                    </el-table-column>
                    <el-table-column prop="wjmc" label="文件下载" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                size="small"
                                @click="downloadfile(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                style="color: blue; text-decoration: underline"
                                >{{ scope.row.wjmc }}</el-button
                            >
                        </template>
                    </el-table-column>
                    <el-table-column prop="bz" label="备注" align="center"> </el-table-column>
                    <el-table-column prop="cjsj" label="上传时间" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.cjsj ? scope.row.cjsj.split(' ')[0] : '' }}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="sfgz" label="是否需要盖章" align="center"> </el-table-column> -->
                </el-table>
                <div class="pagination" style="float: right">
                    <el-pagination
                        background
                        layout="total,prev, pager, next,jumper"
                        :total="cqzltotal"
                        :current-page.sync="cqzlcurrent"
                        :page-size="pageSize"
                        @current-change="cqzlhandleCurrentChange"
                    >
                    </el-pagination>
                </div>
            </div>
            <div v-show="activeName == 'third'">
                <el-form ref="wtzlform" :model="wtzlform" label-width="80px" :inline="true" size="mini">
                    <el-form-item label="文件名称:">
                        <el-input v-model="wtzlform.wjmc" placeholder="请输入文件名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="文件类型:">
                        <el-cascader
                            :options="yjlxlist"
                            :show-all-levels="false"
                            placeholder="请选择文件类型"
                            clearable
                            @change="handleChange1"
                            :props="{ checkStrictly: true }"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item label="备注:">
                        <el-select v-model="wtzlform.bz" placeholder="请选择备注" clearable filterable>
                            <el-option v-for="(item, index) in jyzlbzlist" :key="index" :label="item" :value="item"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="wtzlSearch">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="wtzltable" style="width: 100%" border>
                    <el-table-column label="文件类型" align="center" prop="wjlx">
                        <!-- <template>经营资料</template> -->
                    </el-table-column>
                    <el-table-column label="文件名称" align="center" prop="wjmc"></el-table-column>
                    <el-table-column prop="wjmc" label="文件预览" align="center">
                        <template slot-scope="scope">
                            <router-link
                                target="_blank"
                                :to="{ path: '/perviewfile', query: { id: scope.row.fj[0].id, type: scope.row.fj[0].suffix } }"
                                style="color: #008a94"
                                v-if="
                                    scope.row.fj[0].suffix == '.docx' ||
                                    scope.row.fj[0].suffix == '.doc' ||
                                    scope.row.fj[0].suffix == '.xls' ||
                                    scope.row.fj[0].suffix == '.xlsx'
                                "
                                >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i>
                            </router-link>
                            <el-button
                                type="text"
                                size="small"
                                @click="redownload(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                v-else
                                >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i
                            ></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="wjmc" label="文件下载" align="center">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                size="small"
                                @click="downloadfile(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                style="color: blue; text-decoration: underline"
                                >{{ scope.row.wjmc }}</el-button
                            >
                        </template>
                    </el-table-column>
                    <el-table-column prop="bz" label="备注" align="center"> </el-table-column>
                    <el-table-column prop="cjsj" label="上传时间" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.cjsj ? scope.row.cjsj.split(' ')[0] : '' }}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="sfgz" label="是否需要盖章" align="center"> </el-table-column> -->
                </el-table>
                <div class="pagination" style="float: right">
                    <el-pagination
                        background
                        layout="total,prev, pager, next,jumper"
                        :total="jyzltotal"
                        :current-page.sync="jyzlcurrent"
                        :page-size="pageSize"
                        @current-change="jyzlhandleCurrentChange"
                    >
                    </el-pagination>
                </div>
            </div>
            <div v-show="activeName == 'sixth'">
                <el-form ref="wtyyzlform" :model="wtyyzlform" label-width="80px" :inline="true" size="mini">
                    <el-form-item label="文件名称:">
                        <el-input v-model="wtyyzlform.wjmc" placeholder="请输入文件名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="文件类型:">
                        <el-cascader
                            :options="yjlxlist"
                            :show-all-levels="false"
                            placeholder="请选择文件类型"
                            clearable
                            @change="handleChange2"
                            :props="{ checkStrictly: true }"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item label="备注:">
                        <el-select v-model="wtyyzlform.bz" placeholder="请选择备注" clearable filterable>
                            <el-option v-for="(item, index) in wtyyzlbzlist" :key="index" :label="item" :value="item"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="wtyyzlSearch">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="wtyyzltable" style="width: 100%" border>
                    <el-table-column label="文件类型" align="center" prop="wjlx">
                        <!-- <template>经营资料</template> -->
                    </el-table-column>
                    <el-table-column label="文件名称" align="center" prop="wjmc"></el-table-column>
                    <el-table-column prop="wjmc" label="文件预览" align="center">
                        <template slot-scope="scope">
                            <router-link
                                target="_blank"
                                :to="{ path: '/perviewfile', query: { id: scope.row.fj[0].id, type: scope.row.fj[0].suffix } }"
                                style="color: #008a94"
                                v-if="
                                    scope.row.fj[0].suffix == '.docx' ||
                                    scope.row.fj[0].suffix == '.doc' ||
                                    scope.row.fj[0].suffix == '.xls' ||
                                    scope.row.fj[0].suffix == '.xlsx'
                                "
                                >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i>
                            </router-link>
                            <el-button
                                type="text"
                                size="small"
                                @click="redownload(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                v-else
                                >{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i
                            ></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="wjmc" label="文件下载" align="center">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                size="small"
                                @click="downloadfile(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                style="color: blue; text-decoration: underline"
                                >{{ scope.row.wjmc }}</el-button
                            >
                        </template>
                    </el-table-column>
                    <el-table-column prop="bz" label="备注" align="center"> </el-table-column>
                    <el-table-column prop="cjsj" label="上传时间" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.cjsj ? scope.row.cjsj.split(' ')[0] : '' }}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="sfgz" label="是否需要盖章" align="center"> </el-table-column> -->
                </el-table>
                <div class="pagination" style="float: right">
                    <el-pagination
                        background
                        layout="total,prev, pager, next,jumper"
                        :total="wtyytotal"
                        :current-page.sync="wtyycurrent"
                        :page-size="pageSize"
                        @current-change="wtyyhandleCurrentChange"
                    >
                    </el-pagination>
                </div>
            </div>
            <div v-show="activeName == 'forth'">
                <el-table :data="wtxxtable" style="width: 100%" border max-height="150">
                    <el-table-column label="受托单位" align="center" prop="stdwmc"></el-table-column>
                    <el-table-column label="受托起始日期" align="center" prop="qsrq">
                        <template slot-scope="scope">
                            {{ scope.row.qsrq ? scope.row.qsrq.split(' ')[0] : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="受托终止日期" align="center" prop="zzrq">
                        <template slot-scope="scope">
                            {{ scope.row.zzrq ? scope.row.zzrq.split(' ')[0] : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="租金分成比例" align="center" prop="fcbl"></el-table-column>
                </el-table>
                <div class="pagination" style="float: right">
                    <el-pagination
                        background
                        layout="total,prev, pager, next,jumper"
                        :total="wtxxtotal"
                        :current-page.sync="wtxxcurrent"
                        :page-size="pageSize"
                        @current-change="wtxxhandleCurrentChange"
                    >
                    </el-pagination>
                </div>
            </div>
            <div v-show="activeName == 'fifth'">
                <el-table :data="zlxxtable" style="width: 100%" border max-height="500">
                    <el-table-column label="合同编号" align="center" prop="htbh" fixed width="160"></el-table-column>
                    <el-table-column label="承租人" align="center" prop="czr"></el-table-column>
                    <el-table-column label="证件名称" align="center" prop="zjmc"></el-table-column>
                    <el-table-column label="证件号码" align="center" prop="zjhm"></el-table-column>
                    <el-table-column label="联系方式" align="center" prop="czrlxfs"></el-table-column>
                    <el-table-column label="联系地址" align="center" prop="lxdz"></el-table-column>
                    <el-table-column label="租赁用途" align="center" prop="zlyt"></el-table-column>
                    <!-- <el-table-column label="租赁期限" align="center" prop="zlqx"></el-table-column> -->
                    <el-table-column label="租赁起始日期" align="center" prop="zlqssj">
                        <template slot-scope="scope">
                            {{ scope.row.zlqssj ? scope.row.zlqssj.split(' ')[0] : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="租赁终止日期" align="center" prop="zldqsj">
                        <template slot-scope="scope">
                            {{ scope.row.zldqsj ? scope.row.zldqsj.split(' ')[0] : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="签订日期" align="center" prop="qdsj">
                        <template slot-scope="scope">
                            {{ scope.row.qdsj ? scope.row.qdsj.split(' ')[0] : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="80" align="center">
                        <template slot-scope="scope">
                            <router-link :to="{ name: 'htdetail', params: { id: scope.row.relid, signid: scope.row.id } }">
                                <el-button type="text" size="small">详情</el-button>
                            </router-link>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination" style="float: right">
                    <el-pagination
                        background
                        layout="total,prev, pager, next,jumper"
                        :total="zlxxtotal"
                        :current-page.sync="zlxxcurrent"
                        :page-size="pageSize"
                        @current-change="zlxxhandleCurrentChange"
                    >
                    </el-pagination>
                </div>
            </div>
            <div v-show="activeName == 'seventh'">
                <el-table :data="othertable" style="width: 100%" border max-height="500">
                    <el-table-column prop="dabh" label="档案编号" align="center"> </el-table-column>
                    <el-table-column prop="qs" label="区属" align="center" width="100"> </el-table-column>
                    <el-table-column prop="fwdz" label="房屋地址" align="center"> </el-table-column>
                    <!-- <el-table-column prop="lh" label="楼号" align="center" width="60"> </el-table-column> -->
                    <el-table-column prop="fwyt" label="房屋性质" align="center" width="100"> </el-table-column>
                    <el-table-column prop="cb" label="产别" align="center" width="100"> </el-table-column>
                    <!-- <el-table-column prop="zlc" label="总层数" align="center" width="80"> </el-table-column> -->
                    <el-table-column prop="jzmj" label="建筑面积" align="center" width="100"> </el-table-column>
                    <!-- <el-table-column prop="jizumj" label="计租面积" align="center" width="100"> </el-table-column> -->
                    <el-table-column label="操作" width="80" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="getother(scope.row.id)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination" style="float: right">
                    <el-pagination
                        background
                        layout="total,prev, pager, next,jumper"
                        :total="othertotal"
                        :current-page.sync="othercurrent"
                        :page-size="pageSize"
                        @current-change="otherCurrentChange"
                    >
                    </el-pagination>
                </div>
            </div>
            <div v-show="activeName == 'eighth'">
                <el-upload
                    ref="uploads"
                    class="fwimgup"
                    :headers="myHeaders"
                    multiple
                    :action="httpUrl + '/file/uploadFile'"
                    list-type="picture-card"
                    :on-success="handleAvatarSuccess"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <div style="display: flex; flex-wrap: wrap; margin-top: 20px" class="imgsfw">
                    <div class="fwimgs" v-for="(item, index) in fwimglist" :key="index">
                        <div>
                            <el-image
                                style="width: 148px; height: 148px"
                                :src="item.url"
                                :preview-src-list="fwimglists"
                                class="fwimh"
                            ></el-image>
                            <div class="fwimgItem">{{ item.name }}</div>
                        </div>
                        <i class="delimgs el-icon-delete-solid" @click="delfwimg(item, index)"></i>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog title="详细信息" :visible.sync="otherdetail" :modal-append-to-body="false" center width="80%">
            <el-descriptions :column="3" border size="medium" :labelStyle="rowCenter" :contentStyle="contentCenter">
                <el-descriptions-item label="区属名称：">{{ otherprojectdetail.qs }}</el-descriptions-item>
                <el-descriptions-item label="房屋地址：">{{ otherprojectdetail.fwdz }}</el-descriptions-item>
                <el-descriptions-item label="楼号：">{{ otherprojectdetail.lh }}</el-descriptions-item>
                <el-descriptions-item label="产别：">{{ otherprojectdetail.cb }}</el-descriptions-item>
                <el-descriptions-item label="权证类型：">{{ otherprojectdetail.qzlx }}</el-descriptions-item>
                <el-descriptions-item label="建筑面积：">{{ otherprojectdetail.jzmj }}</el-descriptions-item>
                <el-descriptions-item label="房屋性质：">{{ otherprojectdetail.fwyt }}</el-descriptions-item>
                <el-descriptions-item label="证书编号：">{{ otherprojectdetail.zsbh }}</el-descriptions-item>
                <el-descriptions-item label="计租面积：">{{ otherprojectdetail.jizumj }}</el-descriptions-item>
                <el-descriptions-item label="土地使用权面积：">{{ otherprojectdetail.tdsyqmj }}</el-descriptions-item>
                <el-descriptions-item label="产权单位：">{{ otherprojectdetail.cqdw }}</el-descriptions-item>
                <el-descriptions-item label="发证日期：">{{
                    otherprojectdetail.fzrq ? otherprojectdetail.fzrq.split(' ')[0] : ''
                }}</el-descriptions-item>
                <el-descriptions-item label="土地使用权类型：">{{ otherprojectdetail.tdsyqlx }}</el-descriptions-item>
                <el-descriptions-item label="总楼层：">{{ otherprojectdetail.zlc }}</el-descriptions-item>
                <el-descriptions-item label="地上层数：">{{ otherprojectdetail.dscs }}</el-descriptions-item>
                <el-descriptions-item label="地下层数：">{{ otherprojectdetail.dxcs }}</el-descriptions-item>
                <el-descriptions-item label="风貌建筑：" v-if="type=='2'">{{ otherprojectdetail.fmjz }}</el-descriptions-item>
                <el-descriptions-item label="小洋楼招商：" v-if="type=='2'">{{ otherprojectdetail.zsxyl }}</el-descriptions-item>
                <el-descriptions-item label="建筑形式：">{{ otherprojectdetail.jzxs }}</el-descriptions-item>
                <el-descriptions-item label="原值：">{{ otherprojectdetail.yz }}</el-descriptions-item>
                <el-descriptions-item label="建档日期：">{{
                    otherprojectdetail.jdrq ? otherprojectdetail.jdrq.split(' ')[0] : ''
                }}</el-descriptions-item>
                <el-descriptions-item label="建筑年代：">{{ otherprojectdetail.jznd }}</el-descriptions-item>
                <el-descriptions-item label="档案编号：">{{ otherprojectdetail.dabh }}</el-descriptions-item>
                <el-descriptions-item label="房屋结构：">{{ otherprojectdetail.fwjg }}</el-descriptions-item>
                <el-descriptions-item label="备注：">{{ otherprojectdetail.note }}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
        <el-dialog title="图片预览" :visible.sync="dialogshow" :modal-append-to-body="false" center width="30%">
            <el-image style="width: 100%; height: auto" :src="url" :preview-src-list="srcList"></el-image>
        </el-dialog>
    </div>
</template>
<script>
import {
    builddetail,
    download,
    dawjlist,
    wjbzlist,
    listbybuildid,
    htlistbybuildid,
    redownload,
    otherbuildlist,
    otherdetails,
    fwpiclist,
    fwpiclistadd,
    fwpiclistdel
} from '@/api/index';
import fileType from '../vo/filetype';
import valueList from '@/components/common/valueList.vue';
import global from '@/components/common/httpurl.vue';
export default {
    name: 'detaillz',
    data() {
        return {
            imageUrl: '',
            myHeaders: {
                token: localStorage.getItem('token')
            },
            srcList: [],
            fwimglist: [], //房屋图片列表
            fwimglists: [], //房屋图片预览
            url: '',
            dialogshow: false,
            yjlxlist: valueList.yjlxlist, //文件类型列表
            cqzlbzlist: [], //产权资料
            jyzlbzlist: [], //经营资料
            contentCenter: {
                'min-width': '230px', //最小宽度
                'word-break': 'break-all' //过长时自动换行
            },
            rowCenter: {
                'text-align': 'right',
                width: '230px'
            },
            activeName: 'first',
            form: {},
            projectdetail: {},
            fileList: [],
            fileType: fileType,
            cqtable: [], //产权资料
            cqzltotal: 0,
            cqzlcurrent: 1,
            wtzltable: [], //委托资料
            jyzltotal: 0,
            jyzlcurrent: 1,
            wtyyzltable: [], //委托运营资料
            wtyyzlbzlist: [], //委托运营备注
            wtyytotal: 0,
            wtyycurrent: 1,
            //产权资料form
            cqzlform: {
                wjmc: '',
                bz: '',
                buildid: '',
                gdlx: '1', // 文件类型 1：产权类 2：经营类 ,
                pageSize: 10,
                current: 1
            },
            //产权资料备注form
            cqzlbzform: {
                buildid: '',
                gdlx: '1', // 文件类型 1：产权类 2：经营类 ,
                pageSize: 10,
                current: 1
            },
            //经营资料form
            wtzlform: {
                wjmc: '',
                bz: '',
                buildid: '',
                gdlx: '2', // 文件类型 1：产权类 2：经营类 ,
                pageSize: 10,
                current: 1
            },
            //经营资料备注form
            wtzlbzform: {
                buildid: '',
                gdlx: '2', // 文件类型 1：产权类 2：经营类 ,
                pageSize: 10,
                current: 1
            },
            //委托运营资料form
            wtyyzlform: {
                wjmc: '',
                bz: '',
                buildid: '',
                gdlx: '3', // 文件类型 1：产权类 2：经营类 3：委托运营类,
                pageSize: 10,
                current: 1
            },
            //委托运营备注form
            wtyyzlbzform: {
                buildid: '',
                gdlx: '3', // 文件类型 1：产权类 2：经营类 3：委托运营类 ,
                pageSize: 10,
                current: 1
            },
            //委托资料form
            wtxxtable: [],
            wtxxtotal: 0,
            wtxxcurrent: 1,
            pageSize: 10,
            wtxxform: {
                type: '2',
                relid: '',
                pageSize: 10,
                current: 1
            },
            zlxxtable: [],
            zlxxtotal: 0,
            zlxxcurrent: 1,
            zlxxform: {
                relid: '',
                pageSize: 10,
                current: 1
            },

            // 其他信息
            othertable: [],
            othertotal: 0,
            othercurrent: 1,
            otherform: {
                buildid: '',
                pageSize: 10,
                current: 1
            },
            otherdetail: false,
            otherprojectdetail: {},
            httpUrl: global.httpUrl, //公共地址
            // 房屋图片列表
            fwpicform: {
                buildid: ''
            },
            // 房屋图片上传新增
            fwpicadd: {
                buildid: '',
                id: ''
            },
            buildid: '',
            type:this.$store.getters.type,
        };
    },
    methods: {
        // 委托信息换页
        wtxxhandleCurrentChange(val) {
            this.wtxxcurrent = val;
            this.wtxxform.current = val;
            this.listbybuildid(this.wtxxform);
            console.log(val);
        },
        // 租赁信息换页
        zlxxhandleCurrentChange(val) {
            this.zlxxcurrent = val;
            this.zlxxform.current = val;
            this.htlistbybuildid(this.zlxxform);
            console.log(val);
        },
        // 经营资料换页
        jyzlhandleCurrentChange(val) {
            this.jyzlcurrent = val;
            this.wtzlform.current = val;
            this.wtdawjlist(this.wtzlform);
            console.log(val);
        },
        // 委托运营资料换页
        wtyyhandleCurrentChange(val) {
            this.wtyycurrent = val;
            this.wtyyzlform.current = val;
            this.wtyydawjlist(this.wtyyzlform);
        },
        // 产权资料换页
        cqzlhandleCurrentChange(val) {
            this.cqzlcurrent = val;
            this.cqzlform.current = val;
            this.cqdawjlist(this.cqzlform);
            console.log(val);
        },
        // 其他信息换页
        otherCurrentChange(val) {
            this.othercurrent = val;
            this.otherform.current = val;
            this.otherbuildlist(this.otherform);
            console.log(val);
        },
        // 返回上一页
        backForm() {
            this.$router.go(-1);
        },
        // 楼幢详情
        builddetail(data) {
            builddetail(data).then((res) => {
                this.projectdetail = res.data;
                console.log(this.projectdetail.fj);
            });
        },
        // 下载文件
        downloadfile(id, name, type) {
            console.log(id);
            let filetype = fileType[type];
            let data = {
                fileid: id
            };
            download(data).then((res) => {
                const link = document.createElement('a');
                let blob = new Blob([res], {
                    type: filetype
                });
                link.style.display = 'none';
                //设置连接
                link.href = URL.createObjectURL(blob);
                link.download = name;
                document.body.appendChild(link);
                //模拟点击事件
                link.click();
                console.log(res);
            });
        },
        // 文件预览
        redownload(id, name, type) {
            let filetype = fileType[type];
            let data = {
                fileid: id
            };
            redownload(data).then((res) => {
                console.log(res);
                this.srcList = [];
                let blob = new Blob([res], {
                    type: filetype
                });
                let url = window.URL.createObjectURL(blob);
                this.url = url;
                this.srcList.push(url);
                // this.dialogshow = true
                window.open(url, '_blank');
            });
        },

        // 文件预览
        redownload1() {
            this.srcList = [];
            this.cqtable.map((res) => {
                let filetype = fileType[res.fj[0].suffix];
                let data = {
                    fileid: res.fj[0].id
                };
                redownload(data).then((res) => {
                    console.log(res);
                    let blob = new Blob([res], {
                        type: filetype
                    });
                    let url = window.URL.createObjectURL(blob);
                    this.url = url;
                    this.srcList.push(url);
                    this.dialogshow = true;
                    // window.open(url, '_blank')
                });
            });
        },

        //文件上传成功
        handleAvatarSuccess(res, file, fileLists) {
            console.log(file);
            console.log(fileLists);
            // this.imageUrl = URL.createObjectURL(file.raw);
            fileLists.map((res) => {
                let submitpic = {
                    fj: res.response.data.id, //附件
                    buildid: this.buildid
                };
                this.fwpiclistadd(submitpic);
            });
            this.fwpiclist(this.fwpicform);
        },
        handleRemove(file, fileList) {
            let delpic = {
                id: file.response.data.id
            };
            console.log('删除的文件', file);
            fwpiclistdel(delpic).then((res) => {
                console.log(res);
            });
        },
        // 删除房屋文件
        delfwimg(wjdata, index) {
            this.$confirm('确定删除这张图片吗？')
                .then(() => {
                    let data = { id: wjdata.listid };
                    fwpiclistdel(data).then((res) => {
                        if (res.code == 200) {
                            // this.fwpiclist(this.fwpicform);
                            this.fwimglists.splice(index, 1);
                            this.fwimglist.splice(index, 1);
                            this.$message.success('删除成功');
                        }
                    });
                })
                .catch(() => {
                    this.$message.success('删除取消');
                });
        },
        // 图片上传
        picsubmit() {},
        // 产权资料文件
        cqdawjlist(data) {
            dawjlist(data).then((res) => {
                console.log(res);
                this.cqtable = res.data.records;
                this.cqzltotal = res.data.total;
            });
        },
        // 产权资料文件备注
        cqwjbzlist(data) {
            wjbzlist(data).then((res) => {
                console.log('备注', res);
                this.cqzlbzlist = res.data;
            });
        },
        // 委托资料文件
        wtdawjlist(data) {
            dawjlist(data).then((res) => {
                this.wtzltable = res.data.records;
                this.jyzltotal = res.data.total;
                console.log(res);
            });
        },
        // 委托资料文件备注
        wtwjbzlist(data) {
            wjbzlist(data).then((res) => {
                console.log('备注', res);
                this.jyzlbzlist = res.data;
            });
        },
        // 委托运营资料文件
        wtyydawjlist(data) {
            dawjlist(data).then((res) => {
                this.wtyyzltable = res.data.records;
                this.wtyytotal = res.data.total;
                console.log(res);
            });
        },
        // 委托运营资料文件备注
        wtyywjbzlist(data) {
            wjbzlist(data).then((res) => {
                console.log('备注', res);
                this.wtyyzlbzlist = res.data;
            });
        },
        // 委托信息列表
        listbybuildid(data) {
            listbybuildid(data).then((res) => {
                this.wtxxtable = res.data.records;
            });
        },
        // 租赁信息列表
        htlistbybuildid(data) {
            htlistbybuildid(data).then((res) => {
                this.zlxxtable = res.data.records;
            });
        },
        // 其他信息
        otherbuildlist(data) {
            otherbuildlist(data).then((res) => {
                this.othertable = res.data.records;
                this.othertotal = res.data.total;
                console.log(res);
            });
        },
        // 产权资料查询
        cqzlSearch() {
            this.cqzlcurrent = 1;
            this.cqzlform.current = 1;
            this.cqdawjlist(this.cqzlform);
        },
        // 经营资料查询
        wtzlSearch() {
            this.jyzlcurrent = 1;
            this.wtzlform.current = 1;
            this.wtdawjlist(this.wtzlform);
        },
        // 委托运营资料查询
        wtyyzlSearch() {
            this.wtyycurrent = 1;
            this.wtyyzlform.current = 1;
            this.wtyydawjlist(this.wtyyzlform);
        },
        // 其他信息详情(弹框)
        getother(id) {
            let data = {
                id: id
            };
            this.otherdetails(data);
            this.otherdetail = true;
        },
        // 其他详情
        otherdetails(data) {
            otherdetails(data).then((res) => {
                this.otherprojectdetail = res.data;
            });
        },
        // 获取文件类型处理
        handleChange(value) {
            if (value) {
                this.cqzlform.wjlx = value[value.length - 1];
            }
        },
        // 获取文件类型处理
        handleChange1(value) {
            if (value) {
                this.wtzlform.wjlx = value[value.length - 1];
            }
        },
        handleChange2(value) {
            if (value) {
                this.wtyyzlform.wjlx = value[value.length - 1];
            }
        },
        // 房屋图片列表
        fwpiclist(data) {
            fwpiclist(data).then((res) => {
                console.log(res);
                this.fwimglist = [];
                res.data.records.map((item) => {
                    this.fwredownload(item.fj[0].id, item.fj[0].name, item.fj[0].suffix, item.id);
                });
                this.$refs.uploads.clearFiles();
            });
        },
        // 房屋图片新增
        fwpiclistadd(data) {
            fwpiclistadd(data).then((res) => {
                console.log(res);
            });
        },
        // 房屋图片文件
        fwredownload(id, name, type, listid) {
            let filetype = fileType[type];
            let data = {
                fileid: id
            };
            redownload(data).then((res) => {
                console.log(res);
                let blob = new Blob([res], {
                    type: filetype
                });
                let url = window.URL.createObjectURL(blob);
                this.url = url;
                this.fwimglist.push({
                    listid: listid,
                    url: url,
                    name: name
                });
                this.fwimglists.push(url);
            });
        }
    },
    mounted() {
        console.log(this.$route.params, 'param');
        // let data = {
        //     id: this.$route.params.id
        // };
        let data = {
            id: this.$route.params.id
        };
        this.builddetail(data);
        // 偷懒写法，对于面对存在分页啥的情况比较省事
        // this.cqzlform.buildid = this.$route.params.id
        this.cqzlform.buildid = this.$route.params.id;
        // this.wtzlform.buildid = this.$route.params.id
        this.wtzlform.buildid = this.$route.params.id;
        this.wtyyzlform.buildid = this.$route.params.id;
        this.cqzlbzform.buildid = this.$route.params.id;
        this.wtzlbzform.buildid = this.$route.params.id;
        this.wtyyzlbzform.buildid = this.$route.params.id;
        this.fwpicform.buildid = this.$route.params.id;
        this.buildid = this.$route.params.id;
        this.cqdawjlist(this.cqzlform);
        this.wtdawjlist(this.wtzlform);
        this.wtyydawjlist(this.wtyyzlform);
        this.cqwjbzlist(this.cqzlbzform);
        this.wtwjbzlist(this.wtzlbzform);
        this.wtyywjbzlist(this.wtyyzlbzform);
        this.wtxxform.relid = this.$route.params.id;
        this.listbybuildid(this.wtxxform);
        this.zlxxform.relid = this.$route.params.id;
        this.htlistbybuildid(this.zlxxform);
        this.otherform.buildid = this.$route.params.id;
        this.otherbuildlist(this.otherform);
        this.fwpiclist(this.fwpicform);
    }
};
</script>
<style>
</style>
<style scoped>
.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    display: flex;
    justify-content: space-between;
    width: 100%;
    /* border-bottom: 1px solid #eeeeee; */
    padding-bottom: 20px;
    box-sizing: border-box;
    /* margin-bottom: 20px; */
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 按钮 */
.searchcolor {
    background-color: #7090ff;
}

.detailcontent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.detailcontent .detailitem {
    /* float: left; */
    width: 33%;
    margin-bottom: 30px;
}

.detailcontent .detailitem1 {
    /* float: left; */
    width: 100%;
    margin-bottom: 30px;
}

/* 项目文件 */
.filebox {
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
}

.filebox:hover .fileboxitem {
    color: #7090ff;
}
.fwimgs {
    cursor: pointer;
    margin: 10px;
    position: relative;
}
.fwimgs:first-of-type {
    margin-left: 0;
}
.fwimgItem {
    width: 148px;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-all;
}
.fwimgs:hover .fwimgItem {
    color: #7090ff;
}
.fwimgs:hover .fwimh {
    opacity: 0.5;
}
.fwimgs:hover .delimgs {
    display: inline;
    position: absolute;
    top: 10%;
    right: 0%;
    width: 30px; /* 或者其他固定宽度 */
    height: 30px; /* 或者其他固定高度 */
    margin-top: -10px; /* 负值的一半高度 */
}
.delimgs {
    display: none;
    position: absolute;
    top: 10%;
    right: 0%;
    width: 30px; /* 或者其他固定宽度 */
    height: 30px; /* 或者其他固定高度 */
    margin-top: -10px; /* 负值的一半高度 */
    /* margin-left: -10px;  */
}
/* .fwimgup .el-upload--picture-card{
    width: 100px !important;
    height: 100px !important;
    line-height: 106px !important;
} */
</style>